<!DOCTYPE html>

<html>
<head data-live-domain="jquery.com">
<meta charset="ISO-8859-1">

<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
	src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	
<script>

var FracaoControler = {
		
		divisoes:0,
		
		carregaQuadrado:function(wrap){
			
			var txt = "<rect class='shape'  style='fill:yellow;' x='10' y='10' width='210' height='210' />";
			
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt+"</svg>");
			
			
		},
		carregaQuadradoDividido2:function(wrap){
			FracaoControler.divisoes=2;
			alert(FracaoControler.divisoes);
			//TODO amor faz aqui
		},
		carregaQuadradoDividido4:function(wrap){
			FracaoControler.divisoes=4;
			alert(FracaoControler.divisoes);
			//TODO amor faz aqui
		}
}

$(function(){
	
	FracaoControler.carregaQuadrado("workspace");
	
	$(".dividir").click(function(){
		if(FracaoControler.divisoes===0){
			FracaoControler.carregaQuadradoDividido2("workspace");
		}else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadradoDividido4("workspace");
		}
	});
	
});


</script>
</head>
<body>	
<div  id="workspace" style="height:300px">
</div>
<button class="dividir btn">Dividir</button><button class="voltar btn">Voltar</button>
</body>
</html>
